<template>
  <div>
    <!--查询表单-->
    <el-form :inline="true" style="margin:15px">
      <el-form-item>
        <el-input v-model="searchObj.name" placeholder="讲师姓名"/>
      </el-form-item>

      <el-form-item>
        <el-select v-model="searchObj.level" clearable placeholder="头衔">
          <el-option value="1" label="高级讲师"/>
          <el-option value="2" label="首席讲师"/>
        </el-select>
      </el-form-item>

      <el-form-item label="入驻时间">
        <el-date-picker
          v-model="searchObj.joinDateBegin"
          placeholder="开始时间"
          value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item label="-">
        <el-date-picker
          v-model="searchObj.joinDateEnd"
          placeholder="结束时间"
          value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
      </el-form-item>
    </el-form>
    <el-button type="danger" plain @click="handleDatchDel">批量删除</el-button>
    <!-- scope.$index 代表当前行的索引，从0开始 -->
    <el-table
      :data="teachers"
      border
      style="width: 100%;padding:15px"
      @selection-change="handleSelection">
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        label="序号"
        type="index"
        width="50">
        <template slot-scope="scope" >
          {{ (pageNum-1)*pageSize + 1 + scope.$index }}
        </template>
      </el-table-column>
      <el-table-column
        prop="avatar"
        label="头像"
        width="70">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" style="width:50px;height:50px" alt="">
          <img v-else src="https://xaa0310-gui-file.oss-cn-shanghai.aliyuncs.com/avatar/2022/07/22/c8e37dcf998c478b8649becc90b457e4.jpg" style="width:50px;height:50px" alt="">
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="150"/>
      <el-table-column
        prop="level"
        label="头衔"
        width="150">
        <template slot-scope="scope">
          <el-tag :type="scope.row.level===1?'primary':'success'">
            {{ scope.row.level===1?'高级讲师':'首席讲师' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="career"
        label="简介"
        show-overflow-tooltip
      />
      <el-table-column
        prop="sort"
        label="排序"
        width="100"/>
      <el-table-column
        prop="joinDate"
        label="入驻时间"
        width="250"/>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>

    <div style="text-align:center;margin-top:30px">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[2, 3, 5, 10,100]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>

    </div>

  </div>
</template>
<script>
import teacherApi from '@/api/teacher'
// 1、公共配置  2、模块的CRUD异步请求的所有操作API 3、请求发起结果解析
export default {
  data() {
    return {
      searchObj: {}, // 条件搜索对象
      teachers: [],
      pageNum: 1,
      pageSize: 5,
      total: 0,
      selectedTeachers: []
    }
  },
  created() {
    // 查询讲师列表数据
    // this.getList()
    // 分页查询
    this.getPage()
  },
  methods: {
    // 更新讲师
    handleDatchDel() {
      // debugger
      // 获取批量删除按钮的行数的id集合
      // 判断id集合中是否有值或者length
      if (!this.selectedTeachers || this.selectedTeachers.length === 0) {
        this.$message.warning('请选择要删除的讲师')
        return
      }
      const ids = []
      this.selectedTeachers.forEach(teacher => {
        ids.push(teacher.id)
      })
      // 提交请求
      teacherApi.batchDel(ids).then(r => {
        this.$message.success('删除成功！')
        this.getPage()
      })
    },
    // 表格的选中项改变时的回调事件
    handleSelection(selection) {
      debugger
      console.log(selection)
      this.selectedTeachers = selection
    },
    // 批量删除按钮函数

    resetData() {
      // 清空查询条件
      this.searchObj = {}
      // this.pageNum = 1
      // this.pageSize = 3
      this.getPage()
    },
    // 带条件查询分页讲师数据的按钮单击事件
    fetchData() {
      this.getPage()
    },
    // 分页导航条回调事件处理函数
    handleSizeChange(val) { // pageSize的值改变时的回调
      this.pageSize = val
      // 重新查询分页数据
      this.getPage()
    },
    handleCurrentChange(val) { // 页码修改时的回调
      this.pageNum = val
      this.getPage()
    },
    // 分页查询
    getPage() {
      teacherApi.getPage(this.pageNum, this.pageSize, this.searchObj).then(r => {
        console.log(r.data.page)
        this.teachers = r.data.page.records // 获取分页对象中的分页数据集合
        this.total = r.data.page.total
      })
    },
    // 删除编辑按钮组单击事件
    handleEdit(idx, row) {
      console.log(idx, row)
      this.$router.push(`/teacher/edit/${row.id}`)
    },
    handleDelete(idx, row) { // 删除该行的讲师    删除成功刷新页面的数据
      this.$confirm('此操作将永久删除该讲师, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 确认按钮回调事件
        teacherApi.deleteById(row.id).then(r => {
          this.$message.success(`删除  ${row.name} 成功`)
          this.getPage()
        })
      }).catch(() => { // 取消按钮回调事件
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
